<template>
  <div class="content-wrap">
    <div class="announcement-content">
      <div class="top-panel">
        <div class="top-left-panel">
          <div class="top-left-title" style="display:inline">我的待办 </div>
          <span  class="top-left-time">{{ `${new Date().Format('yyyy-MM')}` }}</span>
          <div class="top-left-wrap">
            <div class="review-content">
              <div class="to-review-image"></div>
              <div class="review-content-infor">
                <div>待审核</div>
                <div>{{ waitAuditNum }}</div>
              </div>
            </div>
            <div class="review-content">
              <div class="reviewed-image"></div>
              <div class="review-content-infor">
                <div>已审核</div>
                <div>{{ doneAuditNum }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="top-right-panel">
          <div class="top-right-title-wrap">
            <div class="top-right-title">常用功能</div>
            <Icon
              type="ios-settings-outline"
              class="top-right-Shortcuts"
              size="28"
              @click="setShortcutsFuc"
            />
          </div>
          <div class="shortcuts-content">
            <div
              v-for="(item, index) in shortcutsListHome"
              :key="index"
              class="shortcuts-content-item"
              @click="gotoPage(item)"
            >
              <img :src="imgList[index].imageUrl" />
              <div>{{ item.title }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="center-panel">
        <div class="center-left-panel">
          <div class="center-panel-title-wrap">
            <div class="center-panel-title-wrap-left">
              <div class="center-panel-title">统计时间</div>
              <div class="center-panel-filter">
                <Select
                  v-model="selectDateWeekCenter"
                  @on-change="changeCenterWeek"
                >
                  <Option
                    v-for="(item, key) in weekList"
                    :key="key"
                    :value="item.value"
                    >{{ item.title }}</Option
                  >
                </Select>
              </div>
            </div>
            <div @click="toggleCenterShow" class="toggle-wrap">
              <Icon v-if="centerShow" type="ios-arrow-dropup" size="32" />
              <Icon v-else type="ios-arrow-dropdown" size="32" />
            </div>
          </div>
          <div v-if="centerShow" class="center-panel-content">
            <div
              class="center-panel-content-item"
              v-for="(item, index) in chartOptionList1"
              :key="index"
            >
              <div class="item-detail" @click="gotoPage(item)">
                <span>详情</span>
              </div>
              <v-chart :option="item.chartOption" autoresize></v-chart>
            </div>
          </div>
        </div>
        <div class="center-right-panel">
          <div class="center-panel-title-wrap">
            <div class="center-panel-title-wrap-left">
              <div class="center-panel-title">统计时间</div>
              <div class="center-panel-filter">
                <Select v-model="selectDate" @on-change="changeMonth">
                  <Option
                    v-for="(item, key) in monthList"
                    :key="key"
                    :value="item.value"
                    >{{ item.title }}</Option
                  >
                </Select>
              </div>
            </div>
            <div @click="toggleCenterShow" class="toggle-wrap">
              <Icon v-if="centerShow" type="ios-arrow-dropup" size="32" />
              <Icon v-else type="ios-arrow-dropdown" size="32" />
            </div>
          </div>
          <div v-if="centerShow" class="center-panel-content">
            <div
              class="center-panel-content-item"
              v-for="(item, index) in chartOptionList2"
              :key="index"
            >
              <div class="item-detail" @click="gotoPage(item)">
                <span>详情</span>
              </div>
              <v-chart :option="item.chartOption" autoresize></v-chart>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom-panel">
        <div class="bottom-panel-title-wrap">
          <div class="bottom-panel-title">审核状态查看</div>
          <div class="bottom-panel-filter">
            <Select v-model="selectDateWeek" @on-change="changeWeek">
              <Option
                v-for="(item, key) in weekList"
                :key="key"
                :value="item.value"
                >{{ item.title }}</Option
              >
            </Select>
          </div>
        </div>
        <div class="bottom-table-wrap">
          <Table
            :loading="loading"
            :data="dataList"
            :columns="columns"
            :height="tableHeight"
            border
          >
            <template slot-scope="scope" slot="state">
              <div>{{ scope.row.auditStateName }}</div>
            </template>
            <template slot-scope="row" slot="operation">
              <div class="flex">
                <Button type="primary" size="small" @click="gotoDetail(row)">
                  详情
                </Button>
              </div>
            </template>
          </Table>
          <div class="page-wrap">
            <Page
              show-sizer
              show-elevator
              show-total
              :current="pageOption.currentPage"
              :total="pageOption.total"
              @on-change="changeCurrentPage"
              @on-page-size-change="changePageSize"
            ></Page>
          </div>
        </div>
      </div>
    </div>
    <cus-Modal
      v-model="setShortcuts"
      ref="setShortcuts"
      title="设置"
      @onOk="saveShortcuts"
      width="1200"
    >
      <CheckboxGroup v-model="shortCutsList">
        <div class="short-wrap-one" v-for="items in routerList" :key="items.id">
          <span class="short-wrap-one-title" v-if="items.resourceType == 1">{{
            items.name
          }}</span>
          <Checkbox v-else :label="item.name"></Checkbox>
          <div v-if="items.children && items.children.length > 0">
            <div
              class="short-wrap-two"
              v-for="itemA in items.children"
              :key="itemA.id"
            >
              <span
                class="short-wrap-two-title"
                v-if="itemA.resourceType == 1"
                >{{ itemA.name }}</span
              >
              <Checkbox v-else :label="itemA.name"></Checkbox>
              <div
                class="short-wrap-thr"
                v-if="itemA.children && itemA.children.length > 0"
              >
                <div v-for="itemB in itemA.children" :key="itemB.id">
                  <Checkbox :label="itemB.name"></Checkbox>
                </div>
              </div>
            </div>
          </div>
        </div>
      </CheckboxGroup>
    </cus-Modal>
  </div>
</template>

<script>
import {
  getAggList,
  getRecordList,
  getSettingList,
  getTaskOption,
  getAggListMonth,
  getAggListWeek,
  updateSettingList
} from "@/api/organ/dishesModule";
import countTo from "@/components/count-to/count-to";
import Vue from "vue";

Vue.component("count-to", countTo);
const chartOption = {
  title: {
    text: "",
    left: "center",
    top: "20px",
  },
  color: ["#1CD6FF", "#1E6FFF", "#FFA901"],
  legend: {
    orient: "vertical",
    right: "0",
    bottom: "25%",
    itemWidth: 14,
    itemHeight: 14,
    itemGap: 20,
    textStyle: {
      fontSize: 12,
      fontWeight: 400,
      color: "#666",
      lineHeight: 14,
    },
  },
  series: [
    {
      name: "",
      type: "pie",
      radius: "60%",
      center: ["40%", "60%"],
      data: [
        {
          value: 20,
          name: "待审核",
        },
        {
          value: 35,
          name: "已审核",
        },
        {
          value: 20,
          name: "已驳回",
        },
      ],
      emphasis: {
        disabled: false,
        scale: true,
        scaleSize: 2,
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
      label: {
        normal: {
          show: true,
          position: "inner", // 数值显示在内部
          formatter: "{c}\n({d}%)", // 格式化数值百分比输出
          color: "#fff",
        },
      },
      labelLine: {
        //删除指示线
        show: false,
      },
    },
  ],
};
const imgList = [
  {
    imageUrl: require("../../../assets/images/Recipes.png"),
  },
  {
    imageUrl: require("../../../assets/images/purchaseOrder.png"),
  },
  {
    imageUrl: require("../../../assets/images/foodAnnouncement.png"),
  },
  {
    imageUrl: require("../../../assets/images/boardExpenses.png"),
  },
  {
    imageUrl: require("../../../assets/images/boardExpenses.png"),
  },
  {
    imageUrl: require("../../../assets/images/boardExpenses.png"),
  },
  {
    imageUrl: require("../../../assets/images/boardExpenses.png"),
  },
];
export default {
  name: "App",
  data() {
    return {
      chartList: [
        {
          imageUrl: require("../../../assets/images/purchaseOrder.png"),
          title: "采购计划",
          router: "view/reportingManagement/procurementPlan",
          routerName: "采购计划",
        },
        {
          imageUrl: require("../../../assets/images/Recipes.png"),
          title: "食谱",
          router: "view/reportingManagement/recipeViewing",
          routerName: "食谱",
        },
        {
          imageUrl: require("../../../assets/images/foodAnnouncement.png"),
          title: "伙食公布表",
          router: "view/reportingManagement/accountingStatements",
          routerName: "伙食公布表",
        },
        {
          imageUrl: require("../../../assets/images/boardExpenses.png"),
          title: "伙食费领报表",
          router: "view/reportingManagement/expenseCollectionReport",
          routerName: "伙食费领报表",
        },
      ],
      imgList: imgList,
      shortcutsListHome: [],
      setShortcuts: false,
      monthList: [],
      selectDate: null,
      chartOptionList1: [],
      chartOptionList2: [],
      columns: [
        {
          title: "序号",
          width: 70,
          type: "index",
          align: "center",
        },
        {
          title: "伙食单位",
          key: "unitName",
          align: "center",
        },
        {
          title: "类型",
          key: "typeName",
          align: "center",
        },
        {
          title: "采购周期",
          key: "dataPeriod",
          align: "center",
        },
        {
          title: "提交时间",
          key: "submitTime",
          align: "center",
        },
        {
          title: "审核状态",
          slot: "state",
          align: "center",
        },
        {
          title: "操作",
          width: 250,
          slot: "operation",
          align: "center",
        },
      ],
      dataList: [{}],
      pageOption: {
        pageSize: 10,
        currentPage: 1,
        total: 100,
      },
      doneAuditNum: 0,
      waitAuditNum: 0,
      selectDateWeek: 0,
      selectDateWeekCenter: 0,
      weekList: [
        { value: 0, title: "上周" },
        { value: 1, title: "本周" },
        { value: 2, title: "下周" },
      ],
      centerShow: true,
      tableHeight: 0,
      loading: false,
      shortCutsList: [],
    };
  },
  computed: {
    routerList() {
      console.log(this.$store.getters.menuList);
      return this.$store.getters.menuList;
    },
  },
  watch: {
    tableHeight: {
      handler(val) {
        if (val < 200) {
          this.tableHeight = 200;
        }
      },
    },
    shortCutsList: {
      handler(val) {
        if (val.length > 4) {
          this.$Message.warning("常用功能快捷方式最多选择4个");
        }
      },
    },
    routerList: {
      handler() {
        // this.saveShortcuts();
      },
    },
  },
  mounted() {
    if(this.$route.params.refreshFlag){
      console.log(11111111111111111111111111111111111111111111111111111,'更新');
      this.refresh()
    }
    // if (!localStorage.getItem("shortcutsList")) {
    //   this.shortCutsList = ["食谱", "采购计划", "月伙食公布表", "伙食费领报表"];
    // } else {
    //   this.shortCutsList = JSON.parse(localStorage.getItem("shortcutsList"));
    // }
    this.getSettingListApi()
    this.getMonthList();
    this.getAggListMonth();
    this.getAggListWeek();
    this.getRecordList();
    this.getTaskOption();
    this.getSettingListApi();
    // this.saveShortcuts();
    this.tableHeight = window.innerHeight - 700;
    window.addEventListener("resize", this.tableHeightChange, true);
  },
  methods: {
        // 第一次进入刷新
       refresh() {
      location.reload()
      this.refreshFlag = false
    },
    getAggListMonth() {
      let params = {};
      params.month = this.selectDate;
      getAggListMonth(params).then((res) => {
        if (res.code == 1) {
          this.formatChartOptionRight(res.data);
        }
      });
    },

    getAggListWeek() {
      let params = {};
      params.startDate = new Date(
        new Date().setHours(0, 0, 0) -
          (new Date().getDay() - 1 - 7 * (this.selectDateWeekCenter - 1)) *
            24 *
            60 *
            60 *
            1000
      ).Format("yyyy-MM-dd");
      params.stopDate = new Date(
        new Date().setHours(0, 0, 0) +
          (7 * (this.selectDateWeekCenter - 1) + 7 - new Date().getDay()) *
            24 *
            60 *
            60 *
            1000
      ).Format("yyyy-MM-dd");
      getAggListWeek(params).then((res) => {
        if (res.code == 1) {
          this.formatChartOptionLeft(res.data);
        }
      });
    },
    changeVisible(data) {
      return false;
    },
    setShortcutsFuc() {
      console.log(this.shortCutsList);
      this.$refs.setShortcuts.show = true;
    },
    saveShortcuts() {
      console.log(this.shortCutsList);
      if (this.shortCutsList.length > 4) {
        this.$Message.error("常用功能快捷方式最多选择4个");
        this.setShortcuts = true;
      } else {
        this.shortCutsList = this.getShortcuts(this.routerList,[],this.shortCutsList,'name','id')
        console.log('abcdefg',this.shortCutsList,this.routerList);
        this.updateSettingListApi(this.shortCutsList)
        this.$refs.setShortcuts.show = false;
      }
    },
    // dataList 菜单路径 ， returnList 数据返回 CutsList 遍历数据，type 删选的值类型， back拿到的值类型
    getShortcuts(dataList = [], returnList = [],CutsList,type,back = true) {
    
      dataList.forEach((item) => {
        if (item.resourceType == 2 && CutsList.includes(item[`${type}`])) {

          returnList.push(back == 'all' ? item : item[`${back}`]);
        } else if (item.children && item.children.length > 0) {
          this.getShortcuts(item.children, returnList,CutsList,type,back);
        }
      });

      return returnList;
    },
    toggleCenterShow() {
      this.centerShow = !this.centerShow;
      if (this.centerShow) {
        this.tableHeight = window.innerHeight - 700;
      } else {
        this.tableHeight = window.innerHeight - 480;
      }
    },
    gotoPage(data) {
      console.log('测试',data);
      // 权限路由
      let permissionList =
        this.$router.options.routes[this.$router.options.routes.length - 1]
          .children;
      if (this.$cu.getPermission(data.name, permissionList)) {
        this.$router.push({
          name: data.name
        });
      } else {
        this.$Message.error("权限不足，请联系管理员");
      }
    },

    gotoDetail(data) {
      console.log('11122',data);
      let toPage = "采购计划";
      let route =
        this.$router.options.routes[this.$router.options.routes.length - 1];
      if (this.$cu.getPermission(data.row.typeName, route.children)) {
        this.$router.push({
          name: data.row.typeName,
          query: {
            id: data.row.dataId,
            dataPeriod: data.row.dataPeriod,
          },
        });
      } else {
        this.$Message.error("权限不足，请联系管理员!");
      }
    },
    changeWeek() {
      this.getRecordList();
    },
    changeCenterWeek() {
      this.getAggListWeek();
    },
    changeMonth() {
      this.getAggListMonth();
    },
    getMonthList() {
      let monthList = [];
      var today = new Date(); // 获取当前时间
      var sixMonthsAgo = new Date(); // 创建一个新的时间对象
      sixMonthsAgo.setMonth(today.getMonth() - 5); // 设置时间对象的月份为当前时间的月份减去6个月
      for (var i = 0; i < 6; i++) {
        console.log(sixMonthsAgo.getMonth() + 1); // 注意月份是从0开始计数，所以需要加1
        monthList.push({
          value: sixMonthsAgo.Format("yyyy-MM"),
          title: `${sixMonthsAgo.getMonth() + 1}月`,
        });
        sixMonthsAgo.setMonth(sixMonthsAgo.getMonth() + 1); // 设置下一个月的时间
      }

      this.monthList = monthList.reverse();
      console.log(this.monthList);
      this.selectDate = this.monthList[1].value;
    },
    resetPageInfo() {
      this.pageOption.pageSize = 10;
      this.pageOption.currentPage = 1;
      this.pageOption.total = 0;
    },
    changeCurrentPage(data) {
      this.pageOption.currentPage = data;
      this.getRecordList();
    },
    changePageSize(data) {
      this.pageOption.pageSize = data;
      this.pageOption.currentPage = 1;
      this.getRecordList();
    },
    getAggList() {
      let params = {};
      params.month = this.selectDate;
      getAggList(params).then((res) => {
        if (res.code == 1) {
          this.formatChartOption(res.data);
        }
      });
    },
    getRecordList() {
      this.loading = true;
      let params = {};
      params.currentPage = this.pageOption.currentPage;
      params.pageSize = this.pageOption.pageSize;
      params.submitTimeStart = new Date(
        new Date().setHours(0, 0, 0) -
          (new Date().getDay() - 1 - 7 * (this.selectDateWeek - 1)) *
            24 *
            60 *
            60 *
            1000
      ).Format("yyyy-MM-dd");
      params.submitTimeEnd = new Date(
        new Date().setHours(0, 0, 0) +
          (7 * (this.selectDateWeek - 1) + 7 - new Date().getDay()) *
            24 *
            60 *
            60 *
            1000
      ).Format("yyyy-MM-dd");
      console.log(params.submitTimeStart);
      console.log(params.submitTimeEnd);
      console.log(this.selectDateWeek);
      getRecordList(params).then((res) => {
        this.loading = false;
        if (res.code == 1) {
          this.dataList = res.data.list;
          this.pageOption.total = res.data.total;
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    getTaskOption() {
      getTaskOption().then((res) => {
        if (res.code == 1) {
          this.waitAuditNum = res.data.waitAuditNum;
          this.doneAuditNum = res.data.doneAuditNum;
        }
      });
    },
    // 获取配置信息
    getSettingListApi() {
      this.shortcutsList= []
      getSettingList().then((res) => {
        if (res.code == 1) {
          this.shortcutsListHome =  this.getShortcuts( this.routerList,[],res.data,'id', 'all')
          this.shortCutsList = this.getShortcuts(this.routerList,[],res.data,'id','name')
          console.log('添加',this.shortcutsList);
        }
      });
    },
    // 修改配置信息
    updateSettingListApi(list) {
      updateSettingList({
        resourceIds: list
      }).then(res => {
        if(res.code == 1) {
          this.$Message.success('修改成功')
          this.getSettingListApi()
        }
      })
    },
    // setRouter() {
    //   const that = this
    //   console.log('错误',this.chartList,this);
    //   this.chartList.forEach((item, index) => {
    //     if (index < 2) {
    //       that.chartOptionList1[index].routerName = item.routerName;
    //     } else {
    //       this.chartOptionList2[index - 2].routerName = item.routerName;
    //     }
    //   });
    // },
    formatChartOptionLeft(dataList) {
      let chartOptionListLeft = [];
      let dataItem = {
        name: "",
        chartOption: JSON.parse(JSON.stringify(chartOption)),
      };
      dataList.forEach((item) => {
        if (item.type == "purchasing_plan") {
          dataItem.name = item.typeName
          dataItem.chartOption.title.text = item.typeName;
          dataItem.chartOption.series[0].data[0].value = item.waitAuditNum;
          dataItem.chartOption.series[0].data[1].value = item.passAuditNum;
          dataItem.chartOption.series[0].data[2].value = item.failAuditNum;
        } else {
          dataItem.name = item.typeName
          dataItem.chartOption.title.text = item.typeName;
          dataItem.chartOption.series[0].data[0].value = item.notSubmitNum
            ? item.notSubmitNum
            : 0;
          dataItem.chartOption.series[0].data[0].name = "未上报";
          dataItem.chartOption.series[0].data[1].value = item.waitAuditNum
            ? item.waitAuditNum
            : 0;
          dataItem.chartOption.series[0].data[1].name = "已上报";
          dataItem.chartOption.series[0].data.pop();
        }
        chartOptionListLeft.push(JSON.parse(JSON.stringify(dataItem)));
      });
      this.chartOptionList1 = chartOptionListLeft;

      // this.setRouter();
    },
    formatChartOptionRight(dataList) {
      let chartOptionListRight = [];
      let dataItem = {
        name: "",
        chartOption: JSON.parse(JSON.stringify(chartOption)),
      };
      dataList.forEach((item) => {
        dataItem.name = item.typeName
        dataItem.chartOption.title.text = item.typeName;
        dataItem.chartOption.series[0].data[0].value = item.notSubmitNum
          ? item.notSubmitNum
          : 0;
        dataItem.chartOption.series[0].data[0].name = "未上报";
        dataItem.chartOption.series[0].data[1].value = item.waitAuditNum
          ? item.waitAuditNum
          : 0;
        dataItem.chartOption.series[0].data[1].name = "已上报";
        if (dataItem.chartOption.series[0].data.length > 2) {
          dataItem.chartOption.series[0].data.pop();
        }
        chartOptionListRight.push(JSON.parse(JSON.stringify(dataItem)));
      });
      this.chartOptionList2 = chartOptionListRight;
      console.log(this.chartOptionList2,'111',dataList);
      // this.setRouter();
    },
    tableHeightChange() {
      setTimeout(() => {
        if (this.centerShow) {
          this.tableHeight = window.innerHeight - 700; // 表格自适应高度
        } else {
          this.tableHeight = window.innerHeight - 480; // 表格自适应高度
        }
      }, 100);
    },
  },
};
</script>

<style lang="scss" scoped>
.top-panel {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.top-left-panel {
  width: calc(50% - 12px);
  height: 140px;
  background: #ffffff;
  border-radius: 6px 6px 6px 6px;
  opacity: 1;
  padding: 16px;
  box-shadow: 0px 4px 8px 0px rgba(108, 137, 165, 0.18);
  .top-left-title {
    width: 80px;
    height: 28px;
    font-size: 20px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 600;
    color: #333333;
    line-height: 23px;
  }
  .top-left-time {
    width: 80px;
    height: 28px;
    font-size: 16px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 23px;
  }
  .top-left-wrap {
    display: flex;
    width: 100%;
    justify-content: space-around;
    padding: 0px 120px;
    .review-content {
      display: flex;
      .review-content-infor {
        display: flex;
        flex-flow: column;
        justify-content: center;
        div:nth-child(1) {
          width: 48px;
          height: 22px;
          font-size: 16px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 19px;
        }
        div:nth-child(2) {
          width: 31px;
          height: 42px;
          font-size: 30px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #1e6fff;
          line-height: 42px;
        }
      }
      .to-review-image {
        width: 80px;
        height: 80px;
        background-image: url("../../../assets/images/toReview.png");
        background-size: cover;
      }
      .reviewed-image {
        width: 80px;
        height: 80px;
        background-image: url("../../../assets/images/reviewed.png");
        background-size: cover;
      }
    }
  }
}
.top-right-panel {
  box-shadow: 0px 4px 8px 0px rgba(108, 137, 165, 0.18);
  width: calc(50% - 12px);
  height: 140px;
  background: #ffffff;
  border-radius: 6px 6px 6px 6px;
  opacity: 1;
  padding: 16px;
  .top-right-title {
    width: 80px;
    height: 28px;
    font-size: 20px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 600;
    color: #333333;
    line-height: 23px;
  }
  .shortcuts-content {
    display: flex;
    justify-content: space-around;
    padding: 0px 50px;
    &-item {
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      img {
        width: 48px;
        height: 56px;
      }
      div {
        height: 30px;
        font-size: 14px;
        line-height: 30px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
      }
    }
  }
}
.center-panel {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  .center-panel-title-wrap {
    display: flex;
    justify-content: space-between;
    .center-panel-title-wrap-left {
      display: flex;
      .center-panel-title {
        width: 80px;
        height: 28px;
        font-size: 20px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 600;
        color: #333333;
        line-height: 40px;
        margin-right: 24px;
      }
      .center-panel-filter {
        width: 160px;
      }
    }
    .toggle-wrap {
      cursor: pointer;
    }
  }
  .center-panel-content {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    &-item {
      width: 40%;
      height: 220px;
      position: relative;
      .item-detail {
        position: absolute;
        right: 0;
        bottom: 0;
        font-size: 14px;
        font-weight: 400;
        color: #1e6fff;
        cursor: pointer;
        z-index: 100;
      }
    }
  }
}
.center-left-panel {
  width: calc(50% - 12px);
  background: #ffffff;
  border-radius: 6px 6px 6px 6px;
  opacity: 1;
  padding: 16px;
  box-shadow: 0px 4px 8px 0px rgba(108, 137, 165, 0.18);
}
.center-right-panel {
  width: calc(50% - 12px);
  background: #ffffff;
  border-radius: 6px 6px 6px 6px;
  opacity: 1;
  padding: 16px;
  box-shadow: 0px 4px 8px 0px rgba(108, 137, 165, 0.18);
}
.bottom-panel {
  width: 100%;
  padding: 16px;
  background: #ffffff;
  border-radius: 6px 6px 6px 6px;
  box-shadow: 0px 4px 8px 0px rgba(108, 137, 165, 0.18);
  .bottom-panel-title-wrap {
    margin-bottom: 6px;
    display: flex;
    .bottom-panel-title {
      width: 125px;
      height: 28px;
      font-size: 20px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 600;
      color: #333333;
      line-height: 40px;
      margin-right: 24px;
    }
    .bottom-panel-filter {
      width: 160px;
    }
  }
}
.page-wrap {
  display: flex;
  justify-content: end;
  margin-top: 6px;
}
::v-deep .ivu-table-wrapper-with-border {
  border-radius: 6px;
}
.top-right-title-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.ivu-checkbox-group {
  display: flex;
  justify-content: space-around;
}
.short-wrap-one {
  .short-wrap-one-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 30px;
  }
}
.short-wrap-thr {
  padding-left: 10px;
}
</style>
